import React, { Component } from "react";
import withPortal from "./withPortal";
import "./style.css";

import { oneOfType, string, number, func } from "prop-types";

// import { Shadow, Center } from "./Styled";

class Model extends Component {
  static propTypes = {
    width: oneOfType([string, number]),
    title: string.isRequired,
    onCancel: func,
    onOk: func,
    cancelText: string,
    okText: string,
  };

  static defaultProps = {
    okText: "确定",
    cancelText: "取消",
  };

  render() {
    const { width, title, onCancel, children, cancelText, okText, onOk } =
      this.props;
    return (
      <>
        {this.props.visible && (
          <div className="shadow">
            <div
              className="center"
              style={{ width: width ? width + "px" : "400px" }}
            >
              <header>
                <h3>{title}</h3>
                <span onClick={onCancel}>X</span>
              </header>
              {children}
              <footer>
                <button onClick={onCancel}>{cancelText}</button>
                <button onClick={onOk}>{okText}</button>
              </footer>
            </div>
          </div>
        )}
      </>
    );
  }
}

export default withPortal(Model);
